<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			var xinm = [
				"方明岳",
				"江浩浩",
				"王乐俊",
				"杨朔",
				"丁雷",
				"刘乐",
				"胡冰",
				"闫凯博",
				"姚云浩",
				"陈宇豪",
				"李萍",
				"殷果",
				"王凯旋",
				"孙楠楠",
				"朱鸿伟",
				"张志伟",
				"陈百舸",
				"薛青华",
				"张和胜",
				"雷奥",
				"严琦峰",
				"李骑兵",
				"谢旭东",
				"庞志豪", "何照耀", "任安康", "刘天赐"
			];
			var timer;
			var starting=false;
			var index=0;
			function doChoose(){
				if(starting){
					window.setTimeout(function(){
						window.clearInterval(timer);
						//把index从数组中删除
						let n=xinm.splice(index,1);
						document.getElementById("suoyou").innerHTML+=n+"<br/>";
					},599);
					starting=false;
					
					return;
				}
				starting=true;
				show(index);
				timer=window.setInterval(function(){
					index=parseInt(Math.random()*xinm.length);
					show(index);
				},4);
			}
			function show(index){
				document.getElementById("show").innerHTML=xinm[index];
			}
			//document.getElementsByClassName()
		</script>
		<style>
		 #app{
			 display: flex;
			 flex: row auto wrap;
		 }
		 #app #choose{
			 width: 46%;
			 border: 1px solid red;
		 }
		 #app #suoyou{
		 			 width: 53%;
		 			 border: 1px solid blue;
		 }
		</style>
	</head>
	<body>
		<div id="app">
			<div id="choose">
				<p id="show"></p>
				<button type="button" onclick="doChoose()">挑选</button>
			</div>
			
			<div id="suoyou">
				
			</div>
		</div>
	</body>
</html>
